<template>
    <view class="info ph-32 pv-32">
        <view class="fs-36 fw-600 text-color4">{{ detail.name }}</view>
        <view class="f ai-c jc-s-b mt-24">
            <view class="f ai-c">
                <view class="f">
                    <image :src="index >= Number(detail.score) ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                </view>
                <view class="fs-28 fw-600 text-color9 ml-12">{{ detail.score }}</view>
                <view class="fs-28 fw-600 text-color4 ml-32">¥68/人</view>
            </view>
            <view class="f">
                <view class="fs-28 text-color3">收藏数</view>
                <view class="fs-28 fw-600 text-color4 ml-8">0</view>
            </view>
        </view>
        <view class="banner w-f mt-32">
            <u-swiper :list="[detail.picUrl]" height="180" radius="12" @change="getCurrentNum" :autoplay="false" indicatorStyle="right: 20px">
                <template v-slot:indicator>
                    <view class="current-num w-73 h-40 f ai-c jc-c">
                        <text class="fs-24 fw-600 text-color5">{{ currentNum + 1 }}/1</text>
                    </view>
                </template>
            </u-swiper>
        </view>
        <view class="f ai-f-s jc-s-b mt-34 pb-36 time">
            <view class="f fd-c f1 mr-36">
                <view>
                    <text class="fs-26 text-color3">营业时间：</text>
                    <text class="fs-26 text-color4">{{ detail.businessHours }}</text>
                </view>
				<view>
					  <text class="fs-26 text-color3">简介：</text>
				    <view class="fs-26 text-color4"> {{ detail.description }} </view>

				</view>
              <!--  <view class="f mt-12 fc-w">
                    <view class="h-30 ph-8 b-4 type mr-8 fs-22" v-for="(item, index) in 3" :key="index">食品</view>
                </view> -->
            </view>
            <view class="f fd-c ai-c" @click="handleTal">
                <image src="http://cwht.ricecs.cn/app/shop/tel.png" class="w-48 h-48 mb-8"></image>
                <view class="fs-20 text-color3">电话</view>
            </view>
        </view>
        <view class="f ai-f-s jc-s-b mt-32">
            <view>
                <view class="fs-26 text-color4"> {{ detail.addressName }} {{ detail.addressDetail }} </view>
               <!-- <view class="f ai-c mt-8">
                    <image src="../../static/logo.png" class="w-24 h-24 mr-10"></image>
                    <view class="fs-26 text-color3">距离你1.6km</view>
                </view> -->
            </view>
            <view class="f fd-c ai-c" @click="handleNavigation">
                <image src="http://cwht.ricecs.cn/app/shop/location.png" class="w-48 h-48 mb-8"></image>
                <view class="fs-20 text-color3">去这里</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, watch, toRefs } from 'vue';
import { storeDetail } from '@/services/api/shop/index';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
const list = ref<any>([]);
const currentNum = ref(0);
const detail = ref<any>({});
const props = defineProps({
    id: {
        type: String,
    },
});
const { id } = toRefs(props);
watch(
    () => [id?.value],
    () => {
        getDetail();
    }
);
//电话
function handleTal() {
    uni.makePhoneCall({
        phoneNumber: detail.value.userMobile,
    });
}
//地址
function handleNavigation() {
    uni.openLocation({
        latitude: 11,
        longitude: 11,
        name: detail.value.name,
        address: detail.value.addressName + detail.value.addressDetail,
        success: function () {
            console.log('success');
        },
    });
}
async function getDetail() {
    const { data } = await storeDetail({ storeId: id.value });
    detail.value = data;
}
const getCurrentNum = (e: any) => {
    currentNum.value = e.current;
};
</script>
<style lang="scss" scoped>
.info {
    background: #ffffff;
    border-radius: 0 0 24rpx 24rpx;
    .time {
        border-bottom: 1px solid #f0f0f0;
    }
    .type {
        background: #f0f2f5;
        color: #5769a0;
    }
    .current-num {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
    }
}
</style>
